<template>
<Row :gutter="30">
  <i-col :span="6"
    v-for="(item, index) in allVideoStreamUrl.videoDetail"
    :key="`item-${index}`"
    style="padding-bottom:22px;">
    <Card class="monitor-card"  :bordered="false" >
    
      <p slot="title" @dblclick="handleVideo(index)">{{item.ch_name}}</p>
      <div class="vid">
        <RTMPPlayer v-if="item.out_url" :src="item.out_url" />
            
        <img v-else src="" width="100%" height="100%"/>
      </div>
      
      <!-- <Row >
        <i-col>
            <Row>
              <i-col :span="24">
                <i-col :span="8">
                  <p>拥堵状况:
                    <Icon v-if='allVideoStreamUrl.videoState[index].jam'  type="ios-radio-button-on" color='red' size=30 />
                    <Icon v-else  type="ios-radio-button-on" color='#2EFE2E' size=30 />
                  </p>
                </i-col>
                <i-col :span="8">
                  <p>行人入侵:
                    <Icon v-if='allVideoStreamUrl.videoState[index].person'  type="ios-man" color='red' size=30 />
                    <Icon v-else  type="ios-man" color='gray' size=30 />
                  </p>
                </i-col>
                <i-col :span="8">
                  <p>停车:
                    <Icon v-if='allVideoStreamUrl.videoState[index].stop'  type="ios-radio-button-on" color='red' size=30 />
                    <Icon v-else  type="ios-radio-button-on" color='#2EFE2E' size=30 />
                  </p>
                </i-col>
              </i-col>
            </Row>
            <Row>
                <i-col :span=24>
                  <i-col :span=12>
                    <p>天气状况:
                      <Icon :type="weatherIcon[allVideoStreamUrl.videoState[index].weather].type" 
                      :color='weatherIcon[allVideoStreamUrl.videoState[index].weather].color' size=30 />
                      
                    </p>
                  </i-col>
                  <i-col :span=12>
                    <p>车速:{{allVideoStreamUrl.videoState[index].speed}} km/h</p>
                  </i-col>
                </i-col>
                
            </Row>
        </i-col>
      </Row> -->
  
    
    </Card> 
  </i-col>
</Row>
  
</template>
<script>
import {mapState, mapActions,mapGetters} from 'vuex'
import RTMPPlayer from './videoPlayerDetail/rtmpPlayer.vue'
var node_schedule = require("node-schedule");
export default {
  components:{
    RTMPPlayer
  },
  mounted(){
    this.getAllVideoStreamUrl(this.highWay)
    // var intervalVideoState = node_schedule.scheduleJob("*/2 * * * * *",() => {
    //     //console.log("实时监控页面视频状态实时获取 -------------> 报警事件数据!")
    //     this.getAllVideoState(this.highWay)
    //   }
    // )
    // // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    // this.$once("hook:beforeDestroy", () => {
    //   //console.log("取消 实时监控页面视频状态实时获取 -------------> 报警事件数据");
    //   intervalVideoState.cancel();
    // })
  },
  computed: {
    ...mapState(['allVideoStreamUrl','weatherIcon','switchWay']),
    ...mapGetters(['highWay'])
  },
  watch:{
    highWay:function(value){
      this.getAllVideoStreamUrl(value)
    }
  },
  methods: {
    ...mapActions([
      'getAllVideoStreamUrl','onloadVideoStreamPlayer','getAllVideoState'
    ]),
    handleVideo(index) {
      let roadName = this.allVideoStreamUrl.videoDetail[index].ch_name
      //console.log("in roadName:",roadName)
      let params = {index,roadName}
      this.onloadVideoStreamPlayer(params)
    }
  }
}
</script>
<style lang="less">
.vid {
  //background-color: yellowgreen;
  // background: url(../../assets/default_poster.png) no-repeat center;
  background-size: 200% 200%;
  //height: 24vh;
  width: 100%;
  
}
.monitor-card .ivu-card-head {
  padding: 4px 10px;
  border-bottom: 1px solid #13a4c2;
  background-color: #13a4c2 !important;
  height: 40px;
}
.monitor-card .ivu-card-head p {
  font-size: 2.2rem;
  height: 35px;
  line-height: 35px;
  color: #fff;
  text-align: left;
}
.monitor-card .ivu-card-body {
  padding: 1px;
  background-color: #13a4c2;
  
}
// .monitor-card .ivu-card-body {
//   padding: 2px;
//   background-color: #4169E1;
//   //background-color:#13a4c2;
  
// }
// .monitor-card .ivu-card-body p {
//   text-align: left;
//   margin-left:10px;
// }

</style>

